<template>
<!-- 视频详情 7 37 -->
  <div id='video01'>
    <template v-if="vipRootObj[7][37].owner">
      <div class="left"
          v-if="response">
        <section class="left01"
                v-if="response.author">
          <p><img src="@/assets/meng/hot_video14.png"><span>作者信息</span></p>
          <ul class="mt_30">
            <li>
              <img :src="response.author.logo">
            </li>
            <li class="mr_40">
              <p class="special dot">{{response.author.nickname}}</p>
              <p>粉丝数：{{format_num(response.author.total_fans)}}</p>
            </li>
            <li class="mr_40">
              <p>{{format_num(response.author.total_favorite)}}</p>
              <p><img src="@/assets/meng/hot_video06.png"><span>总点赞数</span></p>
            </li>
            <li class="mr_40">
              <p>{{format_num(response.author.total_comment)}}</p>
              <p><img src="@/assets/meng/hot_video07.png"><span>总评论数</span></p>
            </li>
            <li>
              <p>{{format_num(response.author.total_share)}}</p>
              <p><img src="@/assets/meng/hot_video08.png"><span>总分享数</span></p>
            </li>
          </ul>
        </section>
        <section class="left02 mt_50">
          <p><img src="@/assets/meng/hot_video15.png"><span>评论热词TOP10</span></p>
          <Constellation :x_data="x_data"
              :y_data="y_data"
              formatter='2'
              v-if="x_data.length!=0" />
          <p v-else  class="no_data">目前没有可以查看的数据哟~</p>
          <p class="mt_30">全部评论</p>
          <video01_table :id="id" />
        </section>
      </div>
      <div class="right"
          v-if="response">
        <section class="right01">
          <p><img src="@/assets/meng/hot_video11.png"><span>音乐信息</span></p>
          <div class="mt_30"
              v-if="response.music">
            <img :src='response.music.thum_pic'>
            <section>
              <p>{{response.music.title}}</p>
              <p>{{response.music.user_count}}人使用</p>
            </section>
          </div>
          <p v-else
            class="no_data">目前没有可以查看的数据哟~</p>
        </section>
        <section class="right02 mt_40">
          <p><img src="@/assets/meng/hot_video12.png"><span>使用人群行业分布</span></p>
          <AgePie :valueData="pie_data"
              v-if="pie_data.length!=0" />
          <p class="no_data"
            v-else>目前没有可以查看的数据哟~</p>
        </section>
        <section class="right03 mt_40">
          <p><img src="@/assets/meng/hot_video16.png"><span>音乐热门视频</span></p>
          <ul class="mt_30"
              v-if="hot_music_video.length!=0">
            <li v-for='(item,index) in  hot_music_video'
                :key='index+"data02"'>

              <img v-if="!item.is_delete"
                  :src='item.thum_pic'>
              <img v-else
                  src='@/assets/meng/hot_video17.png'>
              <a :href="item.url"
                target="_blank"><img src="@/assets/meng/hot_video18.png"></a>
              <img @click="add_star(1,item,index)"
                  v-if="!item.is_collec"
                  src="@/assets/meng/hot_video04.png">
              <img v-else
                  @click="add_star(0,item,index)"
                  src="@/assets/meng/hot_video05.png">
              <section>
                <img src='@/assets/wang/video/zan.png'><span>{{format_num(item.favorite_count)}}</span>
              </section>
            </li>
          </ul>
          <p class="no_data"
            v-else>目前没有可以查看的数据哟~</p>
        </section>
      </div>
    </template>
    <div class="notVipBoxNewWl" v-else>
      <img src="@/assets/meng/l1.png" alt="" class="egBgImg" />
      <div class="dialog_pay_box">
        <payVip routerName="audience" :lowestVipNum="vipRootObj[7][37].ownerMinLevel" :isResize="false" />
      </div>
    </div>            
  </div>
</template>
<script>
import video01_table from './video01_table'
import Constellation from  './Constellation'
import AgePie from  './agePie'
export default {
  name: 'video01',
  components: { video01_table, Constellation, AgePie },
  data() {
    return {
      response: null,
      x_data: [],
      y_data: [],
      pie_data: [],
      response_comment: [],
      hot_music_video: [],
      vipRootObj: this.$store.state.userRoot,  //会员权限对象
    }
  },
  props: ['id', 'data'],
  computed: {},
  created() {
    this.response = this.data
    this.x_data = []
    this.y_data = []
    this.response.aweme.hotword.forEach((element) => {
      this.x_data.push(element.name)
      this.y_data.push(element.value)
    })
    if (this.response.music != null) {
      this.pie_data = this.response.music.chart
      this.hot_music_video = this.response.music.hotaweme.concat()
    }
  },
  mounted() {},
  methods: {
    // 收藏
    add_star(flag, item, index) {
      let that = this
      if (flag) {
        this.$axios
          .post('/api/collection/InsertCollection', {
            CollectId: item.aweme_id,
            Module: 2, //模块 1达人 2视频 3音乐 4话题 5商品
          })
          .then((res) => {
            if (res.data.code == 0) {
              this.$set(this.hot_music_video[index], 'is_collec', 1)
              this.$message({
                message: '收藏成功！',
                type: 'success',
                duration: 2000,
                // offset: '400',
              })
            } else {
              this.$message({
                message: '收藏失败！',
                type: 'error',
                duration: 2000,
                // offset: '400',
              })
            }
          })
          .catch((err) => {
            console.log(err)
          })
      } else {
        this.$axios
          .post('/api/collection/CancelCollection', {
            CollectId: item.aweme_id,
            Module: 2, //模块 1达人 2视频 3音乐 4话题 5商品
          })
          .then((res) => {
            if (res.data.code == 0) {
              this.$set(this.hot_music_video[index], 'is_collec', 0)
              this.$message({
                message: '取消收藏成功！',
                type: 'success',
                duration: 2000,
                // offset: '400',
              })
            } else {
              this.$message({
                message: '取消收藏失败！',
                type: 'error',
                duration: 2000,
                // offset: '400',
              })
            }
          })
          .catch((err) => {
            console.log(err)
          })
      }
    },
  },
}
</script>
<style scoped lang='less'>
.no_data {
  font-size: 16px  !important;;
  text-align: center !important;
  color: #fd7f2c !important;;
  line-height: 300px;
}
.left {
  margin-right: 15px;
  .left02 {
    > p:nth-child(3) {
      box-sizing: border-box;
      font-size: 14px;
      line-height: 46px;
      color: #555555;
      padding-left: 40px;
      width: 100%;
      height: 48px;
      background-color: #f5f9ff;
      border-radius: 4px;
    }
    > p:nth-child(1) {
      img {
        width: 16px;
        vertical-align: -2px;
        margin-right: 9px;
      }
      span {
        font-size: 16px;
        color: #222222;
        font-weight: 600;
      }
    }
    > div:nth-child(2) {
      height: 439px;
    }
    > p:nth-child(2) {
      font-size: 20px;
      text-align: center;
      line-height: 439px;
      color: #222222;
    }
  }
  .left01 {
    ul {
      display: flex;
      align-items: center;
      li:not(:nth-child(2)) {
        text-align: center;
      }
      li {
        .special {
          width: 147px;
          font-size: 16px !important;
        }
        > p:nth-child(1) {
          margin-bottom: 8px;
          font-size: 18px;
          color: #222222;
          font-family: DINAlternate-Bold;
        }
        > p {
          img {
            width: 13px;
            margin-right: 5px;
            vertical-align: -1px;
          }
          span {
            color: #888888;
            font-size: 14px;
          }
        }
        > img {
          width: 68px;
          height: 68px;
          border-radius: 50%;
          margin-right: 11px;
        }
      }
    }
    > p:nth-child(1) {
      img {
        width: 16px;
        height: 16px;
        vertical-align: -2px;
        margin-right: 9px;
      }
      span {
        font-size: 16px;
        color: #222222;
        font-weight: 600;
      }
    }
  }
  width: 100%;
}
.right {
  margin-left: 15px;
  .right03 {
    ul {
      width: 100%;
      display: flex;
      //   justify-content: space-between;
      flex-wrap: wrap;
      > li:hover {
        > a:nth-child(2) {
          display: block;
        }
        > img:nth-child(3) {
          display: block;
        }
      }
      > li {
        margin-right: 9px;
        margin-bottom: 9px;
        position: relative;
        > img:nth-child(1) {
          width: 111px;
          height: 160px;
          border-radius: 4px;
        }
        > a:nth-child(2) {
          position: absolute;
          top: 50%;
          cursor: pointer;
          left: 50%;
          transform: translate(-50%, -50%);
          display: none;
        }
        > img:nth-child(3) {
          position: absolute;
          cursor: pointer;
          top: 7px;
          left: 7px;
          width: 20px;
          height: 20px;
          display: none;
        }
        > section {
          position: absolute;
          left: 7px;
          bottom: 7px;
          span {
            font-family: DINAlternate-Bold;
            font-size: 14px;
            color: #ffffff;
            margin-left: 4px;
          }
          img {
            width: 13px;
            vertical-align: -1px;
            height: 12px;
          }
        }
      }
    }
    > p:nth-child(3) {
      font-size: 20px;
      text-align: center;
      line-height: 439px;
      color: #222222;
    }
    > p:nth-child(1) {
      img {
        width: 16px;
        vertical-align: -2px;
        margin-right: 9px;
      }
      span {
        font-size: 16px;
        color: #222222;
        font-weight: 600;
      }
    }
  }
  .right02 {
    > div {
      height: 285px !important;
    }
    > p:nth-child(1) {
      img {
        width: 16px;
        vertical-align: -2px;
        margin-right: 9px;
      }
      span {
        font-size: 16px;
        color: #222222;
        font-weight: 600;
      }
    }
  }
  .right01 {
    > div:nth-child(2) {
      display: flex;
      align-items: center;
      section {
        > p:first-child {
          color: #222222;
          font-size: 16px;
          margin-bottom: 10px;
        }
        > p:last-child {
          color: #555;
          font-size: 14px;
        }
      }
      img {
        width: 80px;
        height: 80px;
        border-radius: 20px;
        margin-right: 30px;
      }
    }
    > p:nth-child(1) {
      img {
        width: 16px;
        vertical-align: -2px;
        margin-right: 9px;
      }
      span {
        font-size: 16px;
        color: #222222;
        font-weight: 600;
      }
    }
  }
  width: 100%;
}
#video01 {
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding-top: 40px;
}
</style>